
/**
 * Miel: Mobile Internet Explorer Logger v0.1
 * @author: Argenis Leon; argenisleon@gmail.com
 */
if (!miel) {
    var miel = {};
}
/**
 * @function miel.logger
 * @description Create a console and print log information
 * NOTE: CSS styles padding and overflow are NOT supported
 * by Internet Explorer Mobile 6.1 they are used for browser
 * that support it
 */
miel = function(){

    //inject CSS
    var css = ".console{width:100%;border:solid 1px #000000;font-size:0.7em;background-color:White;color:#55FF55}#miel-console{font-size:9px;border:solid #808080 1px}#body-console{overflow:auto;height:80px;border-bottom:solid #808080 1px;background-color:#FFFFD7;color:#000000}#title-console{border-bottom:solid #808080 1px;background-color:#D4D0C8;color:#000000}.border{padding-left:3px;border-bottom:solid #D7D7D7 1px;color:#000000;font-size:9px}.debug{background-color:#FFFFFF}.log{background-color:#FFFFFF}.warn{background-color:#00FFFF}.info{background-color:#FFFFFF}.error{background-color:#FFFFE0;color:#FF0000}";
    document.getElementsByTagName('head')[0].innerHTML += "<style>" + css + "</style>";
    
    var _console = null;
    var _consoleName = "miel-console";
    var _consoleBodyName = "body-console";
    var _consoleTitleName = "title-console";
    var _debug = false;
    var _logger;
    var _bodyLogger;
    
    /**
     * @function: init
     * @description: Initialize the logger console window
     * @param {Object} debug Tell the if should be initialice
     */
    function logger(debug){
        _debug = debug;
        //TODO: I am trying to add dinamically the logger window but Internet Explorer Mobile has a weird behavior
        //document.body.innerHTML += "<div class='console' id='miel-console'></div>";
        //document.getElementsByTagName("body").item(0).innerHTML += "<div class='console' id='miel-console'></div>";
        // Verify if the console exist
        if (debug === false) {
            return true;
        }
        
        _logger = document.createElement('div');
        //alert(_logger);
        //_logger.setAttribute('id',_consoleName);
        document.body.appendChild(_logger);
        
        // Windows Mobile 6.1 Explode
        // Try to put the Logger Console at the top of the body
        //document.body.insertBefore(_logger, document.body.firstChild);
        
        //if (document.getElementById(_consoleName)) {
        _logger.innerHTML += ("<div id='" + _consoleTitleName + "'><a id='clear' name='clear' href='#' onclick='miel.clearConsole();'>Clear</a><spam> / </spam><a id='close' name='close' href='#' onclick='miel.closeConsole();'>Close</a><spam> / </spam><a id='source' name='source' href='#' onclick='miel.viewSourceCode();'>View Source Code</a></div>");
        _logger.innerHTML += ("<div id='" + _consoleBodyName + "'></div>");
        
        _bodyLogger = document.getElementById(_consoleBodyName);
        /*_bodyLogger = document.createElement('div');
         _bodyLogger.setAttribute('id',_consoleBodyName);
         _logger.appendChild(_bodyLogger);*/
        //= document.getElementById('_consoleBodyName');
        return true;
        /*}
         else {
         alert("You must put this  <div class='console' id='miel-console'></div> in the page you want to put the logger console");
         _debug = false;
         return false;
         }*/
    }
    /**
     * log
     * @param {Object} obj
     */
    function log(msg){
        if (_debug === false) {
			return;
		}
        append(msg, 'log');
        
    }
    /**
     * debug
     * @param {Object} obj
     */
    function debug(msg){
        if (_debug === false) {
			return;
		}
        append(msg, 'debug');
        
    }
    /**
     * info
     * @description It can be use to print information usefull for the final user
     * @param {Object} obj
     */
    function info(msg){
        if (_debug === false) {
			return;
		}
        append('Info:' + msg, 'info');
        
    }
    /**
     * warn
     * @description
     * @param {Object} obj
     */
    function warn(msg){
        if (_debug === false) {
			return;
		}
        append('Warning:' + msg, 'warn');
        
    }
    /**
     * error
     * @description It can be use to print on error function
     * @param {Object} obj
     */
    function error(msg){
        if (_debug === false) {
			return;
		}
        append('Error:' + msg, 'error');
    }
    /**
     * @function append
     * @param {Object} msg message to Log
     * @param {Object} className
     */
    function append(msg, className){
        if (_bodyLogger) {
            var tm = new Date();
            var hours = tm.getUTCHours();
            var minutes = tm.getUTCMinutes();
            var seconds = tm.getUTCSeconds();
            _bodyLogger.innerHTML += ("<div class='" + className + " border'>" + hours + ":" + minutes + ":" + seconds + ":" + msg + "</div>");
        }
    }
    
    /**
     * inpector
     * @description Print a object's Attributes
     * @param {Object} el Object which you want to know its Attributes
     *
     */
    function inspector(el){
        var str = "";
        for (var i in el) {
            str += i + ": " + el.getAttribute(i) + "\n";
        }
        log(str);
    }
    /**
     * @function closeConsole
     * @description Close the debug console
     *
     */
    function closeConsole(){
        if (_bodyLogger) {
            _bodyLogger.innerHTML = "";
            _bodyLogger.style.visibility = "hidden";
            _bodyLogger.style.height = "0px";
        }
        
        // release
        /*_logger = null;
         _bodyLogger = null;*/
        // Not debug Anymore
        _debug = false;
        
        document.getElementById("close").innerHTML = "Open";
        document.getElementById("close").onclick = miel.openConsole;
    }
    function openConsole(){
        if (_bodyLogger) {
        
            _bodyLogger.style.visibility = "visible";
            _bodyLogger.style.height = "80px";
        }
        
        // Not debug Anymore
        _debug = true;
        
        document.getElementById("close").innerHTML = "Close";
        document.getElementById("close").onclick = closeConsole;
    }
    /**
     * @function clearConsole
     * @description Clear the debug console info
     */
    function clearConsole(){
    
        if (_bodyLogger) {
            _bodyLogger.innerHTML = "";
            _bodyLogger.style.height = "80px";
        }
    }
    /**
     * @function printSourceCode()
     * print the source code of the page in a alert Box
     *
     */
    function viewSourceCode(){
    
        var code = document.getElementsByTagName('html')[0].innerHTML;
        // Replace "<" by "&lt;" and ">" by "&gt;" 
        code = code.replace(/</g, "&lt;");
        code = code.replace(/>/g, "&gt;</br>");
        log("Source Code:" + code);
        
    }
    return {
        // PUBLIC FUNCTIONS
        logger: logger,
        log: log,
        debug: debug,
        info: info,
        warn: warn,
        error: error,
        inspector: inspector,
        closeConsole: closeConsole,
		openConsole: openConsole,
        clearConsole: clearConsole,
        viewSourceCode: viewSourceCode
    };
}();
